<template>
  <div class="calendar">
    <!-- <button @click="get(2022,7)">click</button> -->
    <div class="calendar_top">
      <!-- <transition name="mask">
            <div class="mask" v-show="calendar_mask_active">
        <p @click="isself = !isself">本人</p>
        <span v-show="isself"><input type="text" /> <button @click="self=true;calendar_mask_active=false" >确认</button></span>
        <p @click="calendar_mask_active=false">访客</p>
      </div>
      </transition> -->

      <p class="iconfont icon-qiehuanqizuo" @click="changeCalendar(-1)"></p>
      <h3>{{ new_year }}-{{ new_month < 10 ? "0" + new_month : new_month }}</h3>
      <p class="iconfont icon-qiehuanqiyou" @click="changeCalendar(1)"></p>
    </div>
    <ul>
      <li>日</li>
      <li>一</li>
      <li>二</li>
      <li>三</li>
      <li>四</li>
      <li>五</li>
      <li>六</li>
      <li
        v-for="item in lastMonthRestDays"
        :key="item"
        style="color: rgb(163, 163, 163, 0.5)"
        @click="changeCalendar(-1)"
      >
        {{ item }}
      </li>
      <li
        v-for="item in thisMonthDays"
        :key="item"
        :class="{
          date_isActive:
            item === date && year === new_year && month === new_month,
        }"
      >
        {{ item }}
      </li>
      <li
        v-for="item in nextMonthRestDays"
        :key="item"
        style="color: rgb(163, 163, 163, 0.5)"
        @click="changeCalendar(1)"
      >
        {{ item }}
      </li>
    </ul>
    <h4 @click="getRes(year, month)" v-if="self">签到</h4>
    <h4 v-else="!self" style="cursor: default">亲爱的访客你好~</h4>
  </div>
</template>

<script>
import {
  getMonthDayCount,
  getLastMonthRestCount,
  getNextMonthRestDays,
  getDateInfo,
} from "@/utils/GetDateTools/index.js";
export default {
  mounted() {
    let dateArr = getDateInfo();
    this.year = this.new_year = dateArr[0];
    this.month = this.new_month = dateArr[1];
    this.date = this.new_date = dateArr[2];
    this.getRes(this.year, 8);
  },
  data() {
    return {
      year: 2022,
      month: 8,
      date: 1,
      new_year: 2022,
      new_month: 8,
      new_date: 1,
      thisMonthDays: 30,
      lastMonthRestDays: [],
      nextMonthRestDays: [],
      isself: false,
      calendar_mask_active: true,
      self: false,
    };
  },
  methods: {
    getRes(year, month) {
      // getFirstWeekDay(year, month);
      this.thisMonthDays = getMonthDayCount(year, month);
      this.lastMonthRestDays = getLastMonthRestCount(year, month);
      this.nextMonthRestDays = getNextMonthRestDays(year, month);
    },
    changeCalendar(val) {
      this.new_month += val;
      if (this.new_month > 12) {
        this.new_month = 1;
        this.new_year += 1;
      } else if (this.new_month < 1) {
        this.new_month = 12;
        this.new_year -= 1;
      }
      this.getRes(this.new_year, this.new_month);
    },
  },
};
</script>

<style lang="less" scoped>
.calendar {
  .mask-enter-active,
  .mask-leave-active {
    transition: opacity 0.4s;
  }
  .mask-enter-active {
    animation: one-in 0.4s infinite;
  }
  .mask-enter,
  .mask-leave-to {
    opacity: 0;
  }
  position: relative;
  user-select: none;
  width: 360px;
  height: 456px;
  position: absolute;
  left: calc(50% - 182px);
  top: calc(50% - 280px);
  background-color: rgba(74, 74, 74, 0.995);
  box-shadow: 0 0 5px 5px rgb(156, 156, 156);
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5px;
  border: 2px solid rgb(114, 114, 114);
  border-radius: 10px;

  .mask {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(74, 74, 74, 0.995);
    transform-origin: top;
    display: flex;
    flex-direction: column;
    p {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 70px;
      color: rgb(180, 180, 180);
    }
    span {
      flex: 0.5;
      display: flex;
      justify-items: center;
      align-items: center;
      flex-direction: column;
      margin-top: 5px;
      input {
        outline: none;
        background-color: rgb(176, 176, 176);
        border: none;
        padding: 2px;
        margin-bottom: 3px;
      }
      button {
        width: 60px;
        background-color: rgb(176, 176, 176);
        color: rgb(99, 99, 99);
        border: none;
        padding: 3px 0;
        cursor: pointer;
      }
    }
    p:hover {
      color: rgb(28, 28, 28);
      background-color: rgb(218, 218, 218);
    }
  }
  .calendar_top {
    width: 300px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    p {
      cursor: pointer;
    }
    h3 {
      padding: 5px 0;
      color: aliceblue;
      font-size: 24px;
    }
  }
  h4 {
    padding: 6px;
    color: aliceblue;
    margin-top: 5px;
    font-size: 23px;
    cursor: pointer;
    background-color: rgba(122, 122, 122, 0.462);
    box-shadow: 0 0 5px 5px rgb(84, 84, 84);
  }

  ul {
    width: 350px;
    display: flex;
    list-style: none;
    flex-wrap: wrap;
    li:nth-child(-n + 7) {
      color: rgb(28, 28, 28);
      font-weight: 600;
      border-bottom: 1px solid rgb(167, 167, 167);
      margin-bottom: 2px;
    }
    li {
      color: rgb(208, 208, 208);
      width: 50px;
      height: 50px;
      text-align: center;
      line-height: 50px;
      font-size: 22px;
    }
    li:nth-last-child(-n + 42):hover {
      background-color: rgb(208, 208, 208);
      color: rgb(2, 163, 155);
      border-radius: 20px;
    }
    .date_isActive {
      background-color: rgb(208, 208, 208);
      color: rgb(2, 163, 155);
      font-weight: 700;
      font-size: 24px;
      border-radius: 20px;
      text-shadow: 0 0 3px rgb(110, 110, 110);
    }
  }
}
</style>